<script>
import { normal_option } from "../common";
import Base from "./Base";

export default {
  name: "ChartBar",
  mixins: [Base],
  data() {
    return {
      defaultOption: {
        ...normal_option,
        tooltip: {
          // trigger: "axis",
          show: true,
          confine: true,
          extraCssText:
            "max-width:300px; white-space:pre-wrap; word-break:break-all",
        },
        grid: {
          right: 20,
          bottom: 50,
          top: 45
        },
        legend: {
          show: false,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            rotate: 0,
            // margin: 18,
            interval: 0,
            align: "center",
            // verticalAlign: 'middle',
            width: 60,
            overflow: "breakAll",
            ellipsis: "...",
            formatter: function (value) {
              let tip = value.length > 10 ? "..." : "";
              return value.substring(0, 9) + tip;
            },
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "#9c9c9c",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [],
      },
      defaultSeries: {
        type: "bar",
        barWidth: 20, // 柱子宽度
        /* barGap: 0// 不同系列柱子间距*/
      },
    };
  },
  computed: {
    option: function () {
      const { xData, yDatas } = this.handleData(this.dataset);
      let option = this.dataset.option;
      let series = [];
      if (yDatas && yDatas.length > 1) {
        yDatas.forEach((yData) => {
          series.push({
            ...this.defaultSeries,
            name: yData.name,
            data: yData.data,
          });
        });
      } else {
        yDatas.forEach((yData) => {
          series.push({
            ...this.defaultSeries,
            // name: yData.name,
            data: yData.data,
          });
        });
      }
      let yAxis = Object.assign(
        {},
        this.defaultOption.yAxis,
        this.dataset.option && this.dataset.option.yAxis
          ? this.dataset.option.yAxis
          : {}
      );

      if (option && option.xAxis) {
        this.defaultOption.xAxis = Object.assign(
          {},
          this.defaultOption.xAxis,
          option.xAxis
        );
      }

      this.defaultOption.xAxis.data = xData;

      this.defaultOption = {
        ...this.defaultOption,
        yAxis,
      };
      if (option && option.legend) {
        this.defaultOption.legend = Object.assign(
          {},
          this.defaultOption.legend,
          option.legend
        );
      }

      let color =
        this.dataset.option && this.dataset.option.color
          ? this.dataset.option.color
          : ["#72c141"];

      return {
        ...this.defaultOption,
        series,
        color,
      };
    },
  },
};
</script>
